<template>
  <view class="study-container">
    <!-- 顶部Tab栏 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, idx) in tabs" 
        :key="idx" 
        class="tab-item"
        :class="{ active: currentTab === idx }"
        @click="currentTab = idx"
      >
        <text class="tab-text">{{ tab }}</text>
        <view class="active-underline" v-if="currentTab === idx"></view>
      </view>
    </view>

    <!-- 功能操作栏（图标替换为照片） -->
    <view class="func-bar">
      <view 
        v-for="(item, idx) in funcList" 
        :key="idx" 
        class="func-item"
      >
        <!-- 功能图标替换为照片，使用绝对路径或网络路径，根据实际照片位置调整 -->
        <view class="func-icon" :style="{backgroundColor: iconBg[idx]}">
          <image 
            class="icon-img" 
            :src="funcImg[idx]" 
            mode="widthFix"
          ></image>
        </view>
        <text class="func-label">{{ item }}</text>
      </view>
    </view>

    <!-- 课程筛选栏（"全部"右侧箭头替换为照片） -->
    <view class="course-filter">
      <view 
        v-for="(tab, idx) in courseTabs" 
        :key="idx" 
        class="course-tab"
        :class="{ active: currentCourseTab === idx }"
        @click="currentCourseTab = idx"
      >
        <text class="course-tab-text">{{ tab }}</text>
      </view>
      <view class="all-btn" @click="openFilter">
        <text class="all-text">全部</text>
        <!-- 箭头替换为照片 -->
        <image 
          class="all-img" 
          :src="allFilterImg"  
          mode="widthFix"
        ></image>
      </view>
    </view>

    <!-- 课程列表（左侧封面替换为照片） -->
    <view class="course-list">
      <view 
        v-for="(course, idx) in courseData" 
        :key="idx" 
        class="course-item"
      >
        <!-- 课程封面图替换为照片 -->
        <view class="course-cover">
          <image 
            class="cover-img" 
            :src="courseCoverImgs[idx]"  
            mode="widthFix"
          ></image>
        </view>
        <!-- 课程信息区 -->
        <view class="course-info">
          <text class="course-title">{{ course.title }}</text>
          <view class="tag-group">
            <view 
              v-for="(tag, tIdx) in course.tags" 
              :key="tIdx" 
              class="course-tag"
              :style="{backgroundColor: tagBg[tIdx]}"
            >
              <text class="tag-text">{{ tag }}</text>
            </view>
          </view>
          <text class="progress" :style="{color: progressColor[idx]}">
            {{ course.progress }}
          </text>
        </view>
        <view class="more-icon">
          <text>⋮</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 顶部Tab数据
      tabs: ['学习', '课表'],
      currentTab: 0,
      // 功能栏数据（新增照片路径数组，替换原icon）
      funcList: ['收藏', '问答', '笔记', '手记', '下载'],
      funcImg: [
        '/static/28.png',  // 收藏功能照片路径
        '/static/29.png',       // 问答功能照片路径
        '/static/30.png',     // 笔记功能照片路径
        '/static/31.png', // 手记功能照片路径
        '/static/32.png'  // 下载功能照片路径
      ],
      iconBg: ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'],
      // 课程筛选栏（新增右侧照片路径）
      allFilterImg: '/static/33.png',  // "全部"右侧照片路径
      courseTabs: ['我的课程', '我的专栏'],
      currentCourseTab: 0,
      // 课程数据（新增课程封面照片数组，替换原背景色+文字）
      courseData: [
        {
          title: '嵌入式底层开发必备-计算机微机原理与接口技术',
          tags: ['免费课程'],
          progress: '最近学习 · 已学0%'
        },
        {
          title: 'Cocos2d-x坦克大战--下',
          tags: ['免费课程'],
          progress: '已学0%'
        },
        {
          title: '【首发】零基础快速上手HarmonyOS（鸿蒙）开发',
          tags: ['免费课程'],
          progress: '已学0%'
        },
        {
          title: '大数据工程师 2024 版',
          tags: ['体系课', '教学服务剩余0天'],
          progress: '已学29%'
        }
      ],
      courseCoverImgs: [
        '/static/34.png',  // 嵌入式课程封面照片
        '/static/35.png',  // Cocos2d-x课程封面照片
        '/static/36.png', // 鸿蒙课程封面照片
        '/static/37.png' // 大数据课程封面照片
      ],
      tagBg: ['#CCEEFF', '#CCEEFF', '#CCEEFF', '#F5E6CC', '#F5E6CC'],
      progressColor: ['#FF3333', '#999', '#999', '#999']
    }
  },
  methods: {
    openFilter() {
   
    }
  }
}
</script>

<style scoped>
/* 全局容器 */
.study-container {
  width: 750rpx;
  min-height: 100vh;
  background: #FFF;
}

/* 顶部Tab栏（样式不变） */
.tab-bar {
  display: flex;
  justify-content: flex-start;
  height: 88rpx;
  padding-left: 20rpx;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 40rpx;
}
.tab-text {
  font-size: 36rpx;
  color: #333;
}
.active-underline {
  width: 48rpx;
  height: 6rpx;
  background: #333;
  border-radius: 3rpx;
  margin-top: 8rpx;
}

/* 功能操作栏（新增照片样式） */
.func-bar {
  display: flex;
  justify-content: space-around;
  padding: 36rpx 0;
  margin: 0 24rpx;
  border-radius: 24rpx;
  background: #FFF;
  box-shadow: 5rpx 5rpx 8rpx 5rpx rgba(0,0,0,0.1);
  margin-top: 40rpx;
}
.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.func-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  overflow: hidden; /* 防止照片超出图标容器 */
}
/* 功能栏照片样式 */
.icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持照片比例并填满容器 */
}
.func-label {
  font-size: 24rpx;
  color: #999;
}

/* 课程筛选栏（新增照片样式） */
.course-filter {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 24rpx;
  border-bottom: 1rpx solid #F5F5F5;
  margin-top: 40rpx;
}
.course-tab {
  font-size: 32rpx;
  color: #333;
  margin-right: 36rpx;
}
.course-tab.active {
  font-weight: bold;
  color: #333;
  position: relative;
}
.course-tab.active::after {
  content: '';
  position: absolute;
  bottom: -26rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 48rpx;
  height: 6rpx;
  background: #333;
  border-radius: 3rpx;
}
.all-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #999;
}
/* "全部"右侧照片样式 */
.all-img {
  width: 24rpx;
  height: 24rpx;
  margin-left: 12rpx;
  object-fit: cover;
  margin-right: 20rpx;
}

/* 课程列表（调整封面照片样式） */
.course-list {
  padding: 40rpx 40rpx; 
}
.course-item {
  display: flex;
  align-items: center;
  margin-bottom: 70rpx; 
}
/* 课程封面容器（移除原背景色，适配照片） */
.course-cover {
  width: 160rpx;
  height: 200rpx;
  border-radius: 20rpx;
  overflow: hidden; /* 防止照片超出封面容器 */
  margin-right: 32rpx;
}
/* 课程封面照片样式 */
.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持照片比例并填满容器 */
}
.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200rpx;
}
.course-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.3;
}
.tag-group {
  display: flex;
  gap: 12rpx;
  margin-top: 16rpx;
}
.course-tag {
  padding: 6rpx 16rpx;
  border-radius: 10rpx;
}
.tag-text {
  font-size: 24rpx;
  color: deepskyblue;
}
.progress {
  font-size: 30rpx;
  margin-top: 16rpx;
}
.more-icon {
  font-size: 50rpx;
  color: #999;
  margin-left: 24rpx;
  position: relative;
  top: 60rpx;
}
</style>